<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/cookie.js"></script>
    <style>
        .input-group {
            margin-top: 10px;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <form action="" onsubmit="return false" autocomplete="off">
        <div class="input-group">
            <labal>用户名:</labal>
            <input type="text" class="user" name="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <labal>密&emsp;码:</labal>
            <input type="password" class="pwd" name="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <input type="submit" class="submit" value="登录">
            <input type="reset" class="reset" value="取消">
        </div>
    </form>
</body>

<script>
    // 用户名
    // 由数字 字母 下划线 $ 组成, 6-12位,且不能以数字开头
    // (1) 一步到位
    // (2)  拆分成三个规则
    //  6-12位
    //  不能以数字开头
    //  由数字 字母 下划线 $ 组成

    // 密码：
    //  由数字 字母 下划线 $ 组成, 6-12位，密码强度

    // 手机号
    // 纯数字 11位   以1开头  第二位3-9

    // 邮箱

    // 用户名 密码 手机号 邮箱 格式全都正确 => 跳转百度



    var form = document.getElementsByTagName("form")[0];
    var { user: userInp, pwd: pwdInp, phone: phoneInp, email: emailInp } = document.getElementsByTagName("form")[0];
    console.log(userInp, pwdInp, phoneInp, emailInp);

    var subBtn = document.getElementsByClassName("submit")[0];

    subBtn.onclick = function () {
        // 用户输入的 用户名和密码
        var user = userInp.value;
        var pwd = pwdInp.value;
        if (user && pwd) {
            var userList = getCookie("userList");  // '[{},{},{}]'   ''
            if (userList) {
                userList = JSON.parse(userList);
            } else {
                userList = [];
            }
            console.log(userList);


            var info = userList.find(item => item.user == user);
            console.log(info);

            if (info) {
                if (pwd === info.pwd) {
                    setCookie("lgc", user, 7 * 24 * 60 * 60);
                    location.href = "./index.html";
                } else {
                    alert("用户名或密码有误!");
                }
            } else {
                alert("用户未注册!");
            }


        }
    }








</script>

</html>